<!-- 配置Tailwind自定义主题变量 -->

&#x3C;script&#x3E;
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    // &#x9884;&#x8BBE;&#x4E3B;&#x9898;&#x8272;&#xFF08;&#x7528;&#x4E8E;&#x6587;&#x5B57;&#x548C;&#x6309;&#x94AE;&#x9002;&#x914D;&#xFF09;
                    theme1: {
                        primary: &#x27;#4F46E5&#x27;,
                        secondary: &#x27;#818CF8&#x27;
                    },
                    theme2: {
                        primary: &#x27;#EC4899&#x27;,
                        secondary: &#x27;#F472B6&#x27;
                    },
                    theme3: {
                        primary: &#x27;#10B981&#x27;,
                        secondary: &#x27;#34D399&#x27;
                    },
                    theme4: {
                        primary: &#x27;#F59E0B&#x27;,
                        secondary: &#x27;#FBBF24&#x27;
                    },
                    theme5: {
                        primary: &#x27;#EF4444&#x27;,
                        secondary: &#x27;#F87171&#x27;
                    }
                }
            }
        }
    }
&#x3C;/script&#x3E;

&#x3C;style type=&#x22;text/tailwindcss&#x22;&#x3E;
    @layer utilities {
        /* &#x4E3B;&#x9898;&#x80CC;&#x666F;&#x6837;&#x5F0F;&#xFF08;&#x6E10;&#x53D8;&#x8272;&#xFF09; */
        .theme-bg-1 {
            background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
        }
        .theme-bg-2 {
            background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
        }
        .theme-bg-3 {
            background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
        }
        .theme-bg-4 {
            background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
        }
        .theme-bg-5 {
            background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
        }
        
        /* &#x4E3B;&#x9898;&#x76F8;&#x5173;&#x5DE5;&#x5177;&#x7C7B; */
        .theme-transition {
            transition: background 0.8s ease, color 0.5s ease, border-color 0.5s ease;
        }
        .theme-card {
            @apply bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg transition-all duration-500 hover:shadow-xl;
        }
        .theme-btn {
            @apply w-10 h-10 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 hover:ring-2 hover:ring-white/50;
        }
    }
&#x3C;/style&#x3E;
</head><!-- 根元素：默认使用主题1，添加过渡效果 --><body class="theme-bg-1 theme-transition min-h-screen font-sans text-white flex flex-col"> <div class="container mx-auto px-4 py-8 max-w-4xl flex-grow flex flex-col"> <!-- 页面标题 --> <header class="text-center mb-12"> <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-3"> <i class="fa fa-paint-brush mr-3"></i>多彩主题切换 </h1> <p class="text-white/90 text-lg max-w-2xl mx-auto"> 点击下方色彩按钮，一键切换页面主题，感受不同风格的视觉体验 </p>
</header>
plaintext

    <!-- 主题切换控制区 -->

    &#x3C;section class=&#x22;mb-12 flex justify-center gap-4 flex-wrap&#x22;&#x3E;
        &#x3C;!-- &#x4E3B;&#x9898;1&#xFF1A;&#x7D2B;&#x8272;&#x7CFB; --&#x3E;
        &#x3C;button class=&#x22;theme-btn theme-bg-1 active&#x22; data-theme=&#x22;1&#x22; aria-label=&#x22;&#x5207;&#x6362;&#x5230;&#x7D2B;&#x8272;&#x4E3B;&#x9898;&#x22;&#x3E;&#x3C;/button&#x3E;
        &#x3C;!-- &#x4E3B;&#x9898;2&#xFF1A;&#x7C89;&#x8272;&#x7CFB; --&#x3E;
        &#x3C;button class=&#x22;theme-btn theme-bg-2&#x22; data-theme=&#x22;2&#x22; aria-label=&#x22;&#x5207;&#x6362;&#x5230;&#x7C89;&#x8272;&#x4E3B;&#x9898;&#x22;&#x3E;&#x3C;/button&#x3E;
        &#x3C;!-- &#x4E3B;&#x9898;3&#xFF1A;&#x7EFF;&#x8272;&#x7CFB; --&#x3E;
        &#x3C;button class=&#x22;theme-btn theme-bg-3&#x22; data-theme=&#x22;3&#x22; aria-label=&#x22;&#x5207;&#x6362;&#x5230;&#x7EFF;&#x8272;&#x4E3B;&#x9898;&#x22;&#x3E;&#x3C;/button&#x3E;
        &#x3C;!-- &#x4E3B;&#x9898;4&#xFF1A;&#x9EC4;&#x8272;&#x7CFB; --&#x3E;
        &#x3C;button class=&#x22;theme-btn theme-bg-4&#x22; data-theme=&#x22;4&#x22; aria-label=&#x22;&#x5207;&#x6362;&#x5230;&#x9EC4;&#x8272;&#x4E3B;&#x9898;&#x22;&#x3E;&#x3C;/button&#x3E;
        &#x3C;!-- &#x4E3B;&#x9898;5&#xFF1A;&#x7EA2;&#x8272;&#x7CFB; --&#x3E;
        &#x3C;button class=&#x22;theme-btn theme-bg-5&#x22; data-theme=&#x22;5&#x22; aria-label=&#x22;&#x5207;&#x6362;&#x5230;&#x7EA2;&#x8272;&#x4E3B;&#x9898;&#x22;&#x3E;&#x3C;/button&#x3E;
    &#x3C;/section&#x3E;

    <!-- 内容展示区（卡片布局，背景半透明增强层次感） -->

    &#x3C;section class=&#x22;grid grid-cols-1 md:grid-cols-2 gap-6 flex-grow&#x22;&#x3E;
        &#x3C;!-- &#x5361;&#x7247;1 --&#x3E;
        &#x3C;div class=&#x22;theme-card&#x22;&#x3E;
            &#x3C;div class=&#x22;flex items-center mb-4&#x22;&#x3E;
                &#x3C;div class=&#x22;w-12 h-12 rounded-full theme-bg-1 flex items-center justify-center mr-4&#x22;&#x3E;
                    &#x3C;i class=&#x22;fa fa-lightbulb-o text-2xl&#x22;&#x3E;&#x3C;/i&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;h2 class=&#x22;text-xl font-semibold text-gray-800&#x22;&#x3E;&#x4E3B;&#x9898;&#x7279;&#x6027;&#x3C;/h2&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;p class=&#x22;text-gray-600 leading-relaxed&#x22;&#x3E;
                &#x6BCF;&#x4E2A;&#x4E3B;&#x9898;&#x90FD;&#x91C7;&#x7528;&#x6E10;&#x53D8;&#x8272;&#x80CC;&#x666F;&#x8BBE;&#x8BA1;&#xFF0C;&#x642D;&#x914D;&#x5BF9;&#x5E94;&#x7684;&#x6587;&#x5B57;&#x548C;&#x5143;&#x7D20;&#x989C;&#x8272;&#xFF0C;&#x786E;&#x4FDD;&#x6574;&#x4F53;&#x89C6;&#x89C9;&#x534F;&#x8C03;&#x7EDF;&#x4E00;&#xFF0C;&#x540C;&#x65F6;&#x6DFB;&#x52A0;&#x5E73;&#x6ED1;&#x8FC7;&#x6E21;&#x52A8;&#x753B;&#xFF0C;&#x907F;&#x514D;&#x5207;&#x6362;&#x65F6;&#x7684;&#x751F;&#x786C;&#x611F;&#x3002;
            &#x3C;/p&#x3E;
        &#x3C;/div&#x3E;

        <!-- 卡片2 -->

        &#x3C;div class=&#x22;theme-card&#x22;&#x3E;
            &#x3C;div class=&#x22;flex items-center mb-4&#x22;&#x3E;
                &#x3C;div class=&#x22;w-12 h-12 rounded-full theme-bg-1 flex items-center justify-center mr-4&#x22;&#x3E;
                    &#x3C;i class=&#x22;fa fa-code text-2xl&#x22;&#x3E;&#x3C;/i&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;h2 class=&#x22;text-xl font-semibold text-gray-800&#x22;&#x3E;&#x6613;&#x4E8E;&#x6269;&#x5C55;&#x3C;/h2&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;p class=&#x22;text-gray-600 leading-relaxed&#x22;&#x3E;
                &#x4EE3;&#x7801;&#x7ED3;&#x6784;&#x6E05;&#x6670;&#xFF0C;&#x65B0;&#x589E;&#x4E3B;&#x9898;&#x53EA;&#x9700;&#x6DFB;&#x52A0;&#x5BF9;&#x5E94;&#x7684;&#x80CC;&#x666F;&#x6837;&#x5F0F;&#x548C;&#x989C;&#x8272;&#x53D8;&#x91CF;&#xFF0C;&#x65E0;&#x9700;&#x4FEE;&#x6539;&#x6838;&#x5FC3;&#x903B;&#x8F91;&#xFF0C;&#x53EF;&#x8F7B;&#x677E;&#x6269;&#x5C55;&#x66F4;&#x591A;&#x8272;&#x5F69;&#x65B9;&#x6848;&#xFF0C;&#x6EE1;&#x8DB3;&#x4E2A;&#x6027;&#x5316;&#x9700;&#x6C42;&#x3002;
            &#x3C;/p&#x3E;
        &#x3C;/div&#x3E;

        <!-- 卡片3 -->

        &#x3C;div class=&#x22;theme-card&#x22;&#x3E;
            &#x3C;div class=&#x22;flex items-center mb-4&#x22;&#x3E;
                &#x3C;div class=&#x22;w-12 h-12 rounded-full theme-bg-1 flex items-center justify-center mr-4&#x22;&#x3E;
                    &#x3C;i class=&#x22;fa fa-mobile text-2xl&#x22;&#x3E;&#x3C;/i&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;h2 class=&#x22;text-xl font-semibold text-gray-800&#x22;&#x3E;&#x54CD;&#x5E94;&#x5F0F;&#x8BBE;&#x8BA1;&#x3C;/h2&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;p class=&#x22;text-gray-600 leading-relaxed&#x22;&#x3E;
                &#x9875;&#x9762;&#x9002;&#x914D;&#x624B;&#x673A;&#x3001;&#x5E73;&#x677F;&#x3001;&#x7535;&#x8111;&#x7B49;&#x4E0D;&#x540C;&#x5C3A;&#x5BF8;&#x7684;&#x8BBE;&#x5907;&#xFF0C;&#x4E3B;&#x9898;&#x5207;&#x6362;&#x529F;&#x80FD;&#x5728;&#x6240;&#x6709;&#x8BBE;&#x5907;&#x4E0A;&#x90FD;&#x80FD;&#x6B63;&#x5E38;&#x5DE5;&#x4F5C;&#xFF0C;&#x786E;&#x4FDD;&#x4E00;&#x81F4;&#x7684;&#x4F7F;&#x7528;&#x4F53;&#x9A8C;&#x3002;
            &#x3C;/p&#x3E;
        &#x3C;/div&#x3E;

        <!-- 卡片4 -->

        &#x3C;div class=&#x22;theme-card&#x22;&#x3E;
            &#x3C;div class=&#x22;flex items-center mb-4&#x22;&#x3E;
                &#x3C;div class=&#x22;w-12 h-12 rounded-full theme-bg-1 flex items-center justify-center mr-4&#x22;&#x3E;
                    &#x3C;i class=&#x22;fa fa-heart text-2xl&#x22;&#x3E;&#x3C;/i&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;h2 class=&#x22;text-xl font-semibold text-gray-800&#x22;&#x3E;&#x89C6;&#x89C9;&#x4F53;&#x9A8C;&#x3C;/h2&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;p class=&#x22;text-gray-600 leading-relaxed&#x22;&#x3E;
                &#x534A;&#x900F;&#x660E;&#x5361;&#x7247;&#x642D;&#x914D;&#x6A21;&#x7CCA;&#x80CC;&#x666F;&#x6548;&#x679C;&#xFF0C;&#x589E;&#x5F3A;&#x9875;&#x9762;&#x5C42;&#x6B21;&#x611F;&#xFF1B;&#x6309;&#x94AE;&#x6DFB;&#x52A0;&#x60AC;&#x505C;&#x52A8;&#x753B;&#xFF0C;&#x63D0;&#x5347;&#x4EA4;&#x4E92;&#x53CD;&#x9988;&#xFF1B;&#x6574;&#x4F53;&#x8BBE;&#x8BA1;&#x7B80;&#x6D01;&#x7F8E;&#x89C2;&#xFF0C;&#x7A81;&#x51FA;&#x4E3B;&#x9898;&#x5207;&#x6362;&#x7684;&#x6838;&#x5FC3;&#x529F;&#x80FD;&#x3002;
            &#x3C;/p&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/section&#x3E;
&#x3C;/div&#x3E;

<!-- 页脚 -->

&#x3C;footer class=&#x22;py-6 text-center text-white/80 text-sm&#x22;&#x3E;
    &#x3C;p&#x3E;&#xA9; 2023 &#x591A;&#x5F69;&#x4E3B;&#x9898;&#x5207;&#x6362;&#x6F14;&#x793A; | &#x7B80;&#x5355;&#x5B9E;&#x7528;&#x7684;&#x4E3B;&#x9898;&#x63A7;&#x5236;&#x65B9;&#x6848;&#x3C;/p&#x3E;
&#x3C;/footer&#x3E;

&#x3C;script&#x3E;
    document.addEventListener(&#x27;DOMContentLoaded&#x27;, function() {
        // &#x83B7;&#x53D6;&#x6838;&#x5FC3;&#x5143;&#x7D20;
        const body = document.body;
        const themeButtons = document.querySelectorAll(&#x27;[data-theme]&#x27;);
        const themeCards = document.querySelectorAll(&#x27;.theme-card .w-12&#x27;); // &#x5361;&#x7247;&#x5185;&#x7684;&#x5F69;&#x8272;&#x5706;&#x5F62;
        
        // &#x4E3B;&#x9898;&#x5207;&#x6362;&#x51FD;&#x6570;
        function switchTheme(themeNum) {
            // 1. &#x79FB;&#x9664;&#x6240;&#x6709;&#x4E3B;&#x9898;&#x7C7B;&#x548C;&#x6309;&#x94AE;&#x6FC0;&#x6D3B;&#x72B6;&#x6001;
            body.classList.remove(&#x27;theme-bg-1&#x27;, &#x27;theme-bg-2&#x27;, &#x27;theme-bg-3&#x27;, &#x27;theme-bg-4&#x27;, &#x27;theme-bg-5&#x27;);
            themeButtons.forEach(btn =&#x3E; btn.classList.remove(&#x27;active&#x27;));
            
            // 2. &#x6DFB;&#x52A0;&#x5F53;&#x524D;&#x4E3B;&#x9898;&#x7C7B;&#x548C;&#x6309;&#x94AE;&#x6FC0;&#x6D3B;&#x72B6;&#x6001;
            const themeClass = &#x60;theme-bg-${themeNum}&#x60;;
            body.classList.add(themeClass);
            
            // 3. &#x6FC0;&#x6D3B;&#x5F53;&#x524D;&#x4E3B;&#x9898;&#x6309;&#x94AE;
            const activeBtn = document.querySelector(&#x60;[data-theme=&#x22;${themeNum}&#x22;]&#x60;);
            if (activeBtn) activeBtn.classList.add(&#x27;active&#x27;);
            
            // 4. &#x66F4;&#x65B0;&#x5361;&#x7247;&#x5185;&#x5F69;&#x8272;&#x5706;&#x5F62;&#x7684;&#x4E3B;&#x9898;&#xFF08;&#x4FDD;&#x6301;&#x4E0E;&#x9875;&#x9762;&#x4E3B;&#x9898;&#x4E00;&#x81F4;&#xFF09;
            themeCards.forEach(card =&#x3E; {
                card.classList.remove(&#x27;theme-bg-1&#x27;, &#x27;theme-bg-2&#x27;, &#x27;theme-bg-3&#x27;, &#x27;theme-bg-4&#x27;, &#x27;theme-bg-5&#x27;);
                card.classList.add(themeClass);
            });
            
            // 5. &#x53EF;&#x9009;&#xFF1A;&#x5B58;&#x50A8;&#x4E3B;&#x9898;&#x5230;&#x672C;&#x5730;&#x5B58;&#x50A8;&#xFF08;&#x5237;&#x65B0;&#x540E;&#x4FDD;&#x6301;&#x5F53;&#x524D;&#x4E3B;&#x9898;&#xFF09;
            localStorage.setItem(&#x27;selectedTheme&#x27;, themeNum);
        }
        
        // 6. &#x4E3A;&#x6BCF;&#x4E2A;&#x4E3B;&#x9898;&#x6309;&#x94AE;&#x6DFB;&#x52A0;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;
        themeButtons.forEach(button =&#x3E; {
            button.addEventListener(&#x27;click&#x27;, function() {
                const themeNum = this.getAttribute(&#x27;data-theme&#x27;);
                switchTheme(themeNum);
            });
        });
        
        // 7. &#x9875;&#x9762;&#x52A0;&#x8F7D;&#x65F6;&#xFF1A;&#x4F18;&#x5148;&#x4F7F;&#x7528;&#x672C;&#x5730;&#x5B58;&#x50A8;&#x7684;&#x4E3B;&#x9898;&#xFF0C;&#x65E0;&#x5219;&#x9ED8;&#x8BA4;&#x4E3B;&#x9898;1
        const savedTheme = localStorage.getItem(&#x27;selectedTheme&#x27;) || &#x27;1&#x27;;
        switchTheme(savedTheme);
    });
&#x3C;/script&#x3E;

</body>
</html> </doubaocanvas-part></doubaocanvas>